<template>
  <c-loading :loading="loading">
    <view class="container evaluate-publish">
      <view class="card" v-for="item in orderItems" :key="item.id">
        <view class="evaluate-goods">
          <c-img class="img" :src="item.smallImg" />
          <view class="goods-body">
            <view class="name row1">{{ item.goodsName }}</view>
            <view class="desc">{{ item.skuDesc }}</view>
          </view>
        </view>
        <view class="flex al-center star">
          <view class="label">商品评分</view>
          <c-star show-msg v-model="item.evaluateScore" />
        </view>
        <view class="evaluate-upload">
          <view class="title">上传图片</view>
          <c-upload :maxCount="9" @upload="onUpload" v-model="item.evaluateMaterials" />
        </view>
        <view class="evaluate-textarea">
          <textarea class="textarea" v-model="item.evaluateContent" placeholder="请输入本次的购物体验或商品使用感受。"></textarea>
        </view>
      </view>
      <view class="fixed-footer">
        <c-button type="primary" @tap="onSubmit()">提交</c-button>
      </view>
      <view class="end"></view>
    </view>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CImg, CStar, CUpload } from '@/components';
import { useLoading, useRouter } from '@/hooks';
import { View, Textarea } from '@tarojs/components';
import api from '@/api';
import { ref } from 'vue';
import toast from '@/utils/toast';

const router = useRouter();
const orderItems = ref([]);

const { loading, options } = useLoading(async options => {
  const info = await api.order.info({ orderNo: options.id });
  info.items.forEach(item => {
    item.evaluateMaterials = [];
    item.evaluateContent = '';
    item.evaluateScore = 10;
  });
  orderItems.value = info.items;
});
const onSubmit = async () => {
  await api.order.evaluate({
    id: options.value.id,
    value: orderItems.value
  });

  toast.success('评价成功').then(() => {
    router.back(true);
  });
};
const onUpload = (file, onProgress) => {
  return api.file.upload('user', file, { onProgress });
};
</script>
<style lang="scss">
.evaluate-publish {
  padding-top: 20px;
  .evaluate-goods {
    padding: 10px 10px 20px;
    border-bottom: var(--onepx) solid var(--color-line);
    display: flex;
    background-color: var(--color-caption);
    .img {
      width: 100px;
      height: 100px;
      flex-shrink: 0;
      border-radius: 10px;
      margin-right: 20px;
    }
    .goods-body {
      flex-grow: 1;
      .name {
        font-weight: bold;
        margin-bottom: 18px;
      }
      .desc {
        font-size: 24px;
        color: var(--color-gray);
      }
    }
  }
  .star {
    padding: 10px;
    .label {
      margin-right: 50px;
    }
  }
  .evaluate-textarea {
    padding: 10px;
    .textarea {
      width: 100%;
      box-sizing: border-box;
      height: calc(5 * 1.5em);
      padding: 20px;
      border-radius: 10px;
      background-color: var(--color-background);
    }
  }
  .evaluate-upload {
    padding: 0;
    .title {
      padding: 10px 10px 10px;
    }
    .upload-wrap {
      padding-left: 10px;
    }
  }
}
</style>
